<template>
	<view class="container">
		<!-- 顶部搜索 -->
		<view class="header">
			<view class="search-box">
				<text class="iconfont icon-xiazai5"></text>
				<input type="text" placeholder="搜索公益活动" v-model="searchText" @confirm="searchCourses" />
			</view>
		</view>
		
		<!-- 主标题 -->
		<view class="course-section">
			<view class="section-title">公益活动</view>
			
			<!-- 课程列表 -->
			<view class="course-list" v-if="gongyiList.length > 0">
				<view class="course-item" v-for="(item, index) in gongyiList" :key="index" @click="goCourseDetail(item)">
					<view class="course-left">
						<image :src="item.image" mode="aspectFill"></image>
						<text class="lesson-tag">公益</text>
					</view>
					<view class="course-right">
						<view class="course-title">{{item.title}}</view>
						<view class="course-desc">{{item.location}}</view>
						<view class="course-price">
							<view>
								<text class="price-tag">¥</text>
								<text class="price-value">{{item.discountPrice}}</text>
								<view class="old-price" v-if="item.originalPrice">¥{{item.originalPrice}}</view>
							</view>
							<view class="buy-now" @click.stop="goCourseDetail(item)">立即参与</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="!loading && gongyiList.length === 0">
			<image src="/static/images/empty-courses.png" mode="aspectFit"></image>
			<text>暂无公益活动</text>
			<button type="primary" size="mini" @click="retryCourseList">重新加载</button>
		</view>
		
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<view class="spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
		
		<!-- 底线 -->
		<view class="mores-txt flex" v-if="!finished && gongyiList.length > 0">
			<text>我是有底线的</text>
		</view>
	</view>
</template>

<script>
import { getCourseList } from '@/api/store.js'

export default {
	data() {
		return {
			gongyiList: [],
			page: 1,
			limit: 10,
			loading: false,
			finished: false,
			searchText: ''
		}
	},
	mounted() {
		this.getGongyiList()
	},
	methods: {
		// 获取公益活动列表
		getGongyiList() {
			this.loading = true
			
			let params = {
				page: this.page,
				limit: this.limit,
				cateId: "748",  // 使用公益活动分类ID
				isShow: true    // 添加isShow过滤条件
			}
			
			if (this.searchText) {
				params.keywords = this.searchText
			}
			
			// 使用课程接口
			getCourseList(params).then(res => {
				if (res.data && res.data.list) {
					// 添加前端二次筛选，确保只有分类ID为748且isShow为true的公益活动
					const courseList = res.data.list
						.filter(item => item.cateId === "748" && item.isShow === true) // 添加isShow过滤
						.map(item => ({
							id: item.id || 0,
							title: item.storeName || '未命名活动',
							image: item.image || '/static/images/default_course.png',
							popularity: ((item.sales || 0) + (item.ficti || 0)) / 10000,
							location: item.location || '待定',
							time: item.courseTime || '待定',
							discountPrice: item.price || 0,
							originalPrice: item.otPrice || 0,
							cateId: "748", // 确保分类ID正确
							totalEpisodes: item.totalEpisodes || 0,
							updatedEpisodes: item.updatedEpisodes || 0
						}))
					
					this.gongyiList = [...this.gongyiList, ...courseList]
					this.page++
					this.finished = courseList.length < this.limit
				} else {
					this.finished = true
				}
				this.loading = false
			}).catch(err => {
				console.error('获取公益活动列表失败', err)
				uni.showToast({
					title: '获取公益活动列表失败',
					icon: 'none'
				})
				this.loading = false
				this.finished = true
			})
		},
		
		onReachBottom() {
			if (!this.loading && !this.finished) {
				this.getGongyiList()
			}
		},
		
		goCourseDetail(item) {
			if (!item || !item.id) {
				uni.showToast({
					title: '课程信息不完整',
					icon: 'none'
				});
				return;
			}
			
			uni.navigateTo({
				url: `/pages/course/kechengxiangqiang/kechengxiangqiang?id=${item.id}`
			});
		},
		
		retryCourseList() {
			this.page = 1
			this.gongyiList = []
			this.finished = false
			this.getGongyiList()
		},
		
		searchCourses() {
			this.page = 1
			this.gongyiList = []
			this.finished = false
			this.getGongyiList()
		}
	},
	onPullDownRefresh() {
		this.page = 1
		this.finished = false
		this.gongyiList = []
		this.getGongyiList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 30rpx;
}

.header {
	background-color: $theme-color;
	padding: 20rpx 30rpx;
	
	.search-box {
		display: flex;
		align-items: center;
		background: rgba(247, 247, 247, 1);
		border: 1px solid rgba(241, 241, 241, 1);
		border-radius: 35rpx;
		height: 70rpx;
		padding: 0 30rpx;
		
		.iconfont {
			margin-right: 20rpx;
			font-size: 26rpx;
			color: #666666;
		}
		
		input {
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333;
		}
	}
}

.course-section {
	padding: 0 30rpx;
	
	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		padding: 20rpx 0;
	}
}

.course-list {
	.course-item {
		display: flex;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.course-left {
		position: relative;
		width: 220rpx;
		height: 220rpx;
		flex-shrink: 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
		
		.lesson-tag {
			position: absolute;
			left: 0;
			top: 0;
			background-color: #68A064;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 12rpx;
			border-radius: 8rpx 0 8rpx 0;
		}
	}
	
	.course-right {
		flex: 1;
		padding-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.course-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.course-desc {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.course-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.price-tag {
		font-size: 26rpx;
		color: $theme-color;
	}
	
	.price-value {
		font-size: 36rpx;
		font-weight: bold;
		color: $theme-color;
	}
	
	.old-price {
		display: inline-block;
		margin-left: 12rpx;
		text-decoration: line-through;
		color: #999;
		font-size: 24rpx;
	}
	
	.buy-now {
		width: 130rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background-color: $theme-color;
		color: #fff;
		font-size: 28rpx;
		border-radius: 28rpx;
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;
	
	image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}
	
	button {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: $theme-color;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
	}
}

.loading {
	text-align: center;
	padding: 30rpx 0;
	
	.spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid $theme-color;
		border-radius: 50%;
		margin: 0 auto 10rpx;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.loading-text {
		font-size: 26rpx;
		color: #999;
	}
}

.mores-txt {
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 70rpx;
	color: #999;
	font-size: 24rpx;
	display: flex;
}
</style>
